<template>
   <div class="wrapper index-active">
       <div class="container">
           <div class="title">
                <h1 class="ac-title">精彩案例</h1>
                <router-link to = "/" class="go">查看更多></router-link>    
           </div>
           <div class="swiper">
                <swiper :options="swiperOption" >
                    <!-- slides -->
                    <swiper-slide v-for="item of list" :key="item.id">
                    <router-link :to="item.url">
                        <div class="show">
                            <div class="case">
                                <img class="swiper-img" style="height:100%" :src="item.img.url" alt="">
                            </div>
                            <div class="info">
                                <img class="pic" src="@/assets/index/pic1.jpg" alt="">
                                <h1 class="name">周娇<span>资深设计师</span></h1>
                                <h2 class="product">美洲故事</h2>
                                <h3 class="size">150M</h3>
                                <h3 class="size">meishifengge全屋定制</h3>
                            </div>
                        </div>
                        

                    </router-link>
                    </swiper-slide>
                    
                    
                    <!-- Optional controls -->
                    <div class="swiper-pagination"  slot="pagination"></div>
                </swiper>
            </div>
       </div>
       
        
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'
export default {
  name: 'IndexDesignCase',
  data () {
    return {
      msg: 'index',
      id:4,
      list:[],
      swiperOption:{
                  pagination:'.swiper-pagination',
                  loop:true,
                  autoplay:3000,
                  autoplayDisableOnInteraction: false
              }
    }
  },
   computed:{
        ...mapState(['baseUrl'])
    },
  mounted() {
    // console.log(this.baseUrl)
    this.getInfo()
    
  },
  methods: {
    getInfo(){
      console.log(this.baseUrl)
      axios.get(this.baseUrl+'banner/'+this.id,
               )
      .then(this.getInfoSucc)
    },
    getInfoSucc(response){
      console.log(response)
      this.list = response.data.items
    }
  },
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"
img 
    width 100%
.container
  container()  

 a
    display block
    color black
.title  
    overflow hidden
.title>h1
  title()
.ac-title::after
  titleAfter()

.go
  go()
.swiper
    margin-top 16px
    margin-bottom 65px
.show
    overflow hidden
    height 550px
    .case
        float left
        width 880px
        height 100%
        
    .info
        float right
        width 320px
   
        .pic
            width 150px
            height 200px
            margin 60px auto 0 auto
            display block
        .name
            margin 20px 0
            text-align center
            font-size 22px
.name>span
    font-size 16px
    margin-left 20px
    color #1e1e1e
.product
    text-align center
    font-size 26px
    margin 25px 0 
.size
    text-align center
    font-size 16px
    margin 9px 0
</style>
